<!-- 我的项目页面 -->
<template>
	<div class="project-list">
		<el-input clearable class="search" v-model="search" placeholder="输入项目名称以搜索项目" size="small" :prefix-icon="Search" />
		<el-row :gutter="20" class="home-card-one mb15 ml10">
			<el-col :span="6" :offset="0" v-for="(project,index) in projects" :key="project.proj_no">
				<ProjectCard :number="index" :project="project" @click="openProject(project)"></ProjectCard>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {ref, onMounted,watch} from 'vue'
	import {useRouter} from 'vue-router'
	import {Search} from '@element-plus/icons-vue'
	

	/* 引入组件 */
	import ProjectCard from '/@/views/myproj/components/projectCard.vue'

	/* 引入API */
	import {getUserProjects} from '/@/api/project'
	import {useProjectStore} from '../../stores/project'
	/* 定义变量内容 */
	const projects = ref([])
	const search = ref('')
	const projectStore = useProjectStore()
	const router = useRouter()


	watch(search,async()=>{
       if(search.value){
		let data = await getUserProjects({
			user_token: localStorage.getItem('token'),
			authCode:localStorage.getItem('authCode')
		})
		projects.value  =  data.filter(v=>v.proj_no.toLowerCase().includes(search.value.toLowerCase() )  || v.proj_name.toLowerCase().includes(search.value.toLowerCase())  )
	   }else{
		projects.value = await getUserProjects({
			user_token: localStorage.getItem('token'),
			authCode:localStorage.getItem('authCode')
		})
	   }
	})

	/* 定义函数内容 */
	function openProject(project) {
		localStorage.setItem('selectedProject', JSON.stringify(project))
		// 1.将当前选中项目信息存储到store中
		projectStore.projectInfo = project
		projectStore.setProjectInfo(project)
		// 2.将当前选中项目信息存储到本地
		

		router.push({
			name: 'equips',
		})
		// 更新header中当前选中项目名称
	
	}

	/* 定义生命周期函数 */
	onMounted(async () => {
		projects.value = await getUserProjects({
			user_token: localStorage.getItem('token'),
			authCode:localStorage.getItem('authCode')
		})
	})
</script>

<style scoped>
	.project-list {
		width: 100px;
		background-color: #fff;
	}

	.search {
		width: 20%;
		margin: 16px;
	}
</style>
